<template>
  <div>
    <div v-if="!AccountItems.length" class="empty-accounts">暂无可配置的账户</div>
    <div v-else class="account-list">
      <AccountTemplate @update:active="accountChange">
        <template #default>
          <div>
            <div>
              <div>点击监测地址：</div>

              <!-- 不让拖动 -->
              <a-textarea
                :rows="3"
                style="width: 600px; resize: none"
                placeholder="需要以“https://”开头"
                v-model:value="Monitor[AccountItems[accountIdIndex]._id].clickMonitor"
              />
            </div>
            <div style="margin: 20px 0">
              <div>DeepLink地址：</div>
              <a-textarea
                :rows="3"
                style="width: 600px; resize: none"
                placeholder="格式需要为xxx://xxx"
                v-model:value="Monitor[AccountItems[accountIdIndex]._id].deepLinkUrl"
              />
            </div>
            <div>
              <div>展示监测地址：</div>
              <a-textarea
                :rows="3"
                style="width: 600px; resize: none"
                placeholder="需要以“https://”开头"
                v-model:value="Monitor[AccountItems[accountIdIndex]._id].displayMonitor"
              />
            </div>
          </div>
        </template>
      </AccountTemplate>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, provide } from "vue";
import AccountTemplate from "@/pages/NewBatchCreateAd/components/common/MultiAccountTemplate.vue";
import { batchCreateAdStore } from "@/pages/NewBatchCreateAd/store/batchCreateAdStore";
import _ from "lodash";
const store = batchCreateAdStore();
const { AccountItems } = store;
provide("accounts", AccountItems);

console.log(AccountItems);

const accountIdIndex = ref(0);
const accountChange = (index: number) => {
  accountIdIndex.value = index;
};

const obj = store.Monitor;
const Monitor = ref(_.cloneDeep(obj));

// 判断obj的key是否在AccountItems中，不在则删除
Object.keys(obj).forEach((key: any) => {
  const numKey = parseInt(key);
  if (!AccountItems.some((account: any) => account._id === numKey)) {
    delete Monitor.value[key];
  }
});

// 确保所有账号监测链接都有默认值
AccountItems.forEach((account: any) => {
  if (!Monitor.value[account._id]) {
    Monitor.value[account._id] = {
      clickMonitor: "",
      deepLinkUrl: "",
      displayMonitor: "",
    };
  }
});

const getData = () => {
  return Monitor.value;
};

defineExpose({
  getData,
});
</script>

<style scoped lang="less"></style>
